<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>w0929_3_event</title>
		<style>
			.txt01{border:4px solid black;}
		</style>
		<script>
		//id가 btn01버튼클릭하면 user가 입력한 id값을 경고창에 출력
		//user가 입력한 id값이 비어있으면 "id는 필수입력입니다." 경고창에 출력
		window.onload=function(){
			//id입력란에 포커스가 있으면 임의 배경색 변경 
			document.getElementById("userName").onfocus=function(){
			this.style.backgroundColor="#ccffcc";
			};
			
			//1.id가 btn01버튼클릭하면 user가 입력한 id값을 경고창에 출력
			var btn=document.getElementById("btn01");
			btn.onclick =function(){
				//if(frm1.userName.value==""){
				if(uName.value==""){
					alert('id는 필수입력입니다.');
					uName.focus();
				}else{
					//var uName=window.document.forms[0].elements[0];
					//var uName=window.document.frm1.elements[0];
					//alert("user가 입력한 id값:"+uName.value);
					//alert("user가 입력한 id값:"+uName.value);
					//var uName=document.getElementsByTagName("input")[0];
					var uName=document.getElementsByClassName("txt01")[0];
					
					alert('user가 입력한 id값: '+uName.value);
					//alert(frm1.userName.value);
				}
			};
			
			//submit버튼 클릭시 id값 필수 입력 여부 체크
			document.getElementById("frm1").onsubmit=function(){
				if(uName.value==""){
					alert("id는 필수 입력입니다");
					uName.focus();
					return false;
				}
			
			}
			
		};
		</script>
	</head>                                                                          

	<body>
	<form name="frm1" id="frm1" action="success.html" method="get">	
		<!--id를 입력받는 text field name과 id값은 userName submit버튼-->
		<div><label for="userName">아이디</label> 
			<input type="text" name="userName" id="userName" class="txt01" />
		</div>
		<div>
			<input type="button" value="id값 확인" id="btn01"/>
			<input type="submit" value="확인" id="btnSubmit"/>
		</div>
	</form>
	</body>
</html>
